<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<view class="item-title">房屋信息</view>
			<u-form-item label="房屋位置:" prop="fwwz"  :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.fwwz" border="true" type="textarea" :disabled="disabled" />
			</u-form-item>
			<view class="item-title">房东信息</view>
			<u-form-item label="姓名:" prop="fdxm" :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.fdxm" border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="身份证号:" prop="fdsfzh"  :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.fdsfzh" @click="keyboardShow=!keyboardShow"  border="true" :disabled="true"/>
			</u-form-item>
			<u-form-item label="手机号:"  :border-bottom="false"  label-width="150" >
				<u-input v-model="formData.fdsjh" maxlength="11" border="true" :disabled="disabled"/>
			</u-form-item>
			<view class="item-title">租住人信息
				<u-icon v-if="!disabled" name="minus-circle" style="float: right;margin-right: 2px;" color="#fa3534" size="40" label="删除" @click="del"></u-icon>
				<u-icon v-if="!disabled" name="plus-circle" style="float: right;margin-right: 2px;" color="#2979ff" size="40" label="新增" @click="add"></u-icon>
			</view>
			<z-table :tableData='formData.list' :columns='columns' stickSide :showLoading="false"  :tableHeight='300' :showSelect="!disabled" @onSelect='tableSelect' ></z-table>
		</u-form>
		<u-button v-if="!disabled" @click="save(1)" :disabled="submitBtn" type="primary">保存</u-button>
		
		<u-toast ref="uToast" />
		<view class="buttons" v-if="hasChecked">
			<u-button  @click="checked()" :disabled="submitBtn" type="primary">审核通过</u-button>
			<u-button  @click="unChecked()" :disabled="submitBtn" type="success">审核不通过</u-button>
		</view>
		<u-modal show-cancel-button="true" :content-style="modalContentStyle" @confirm="confirm" v-model="unCheckedModalShow" :title="content" >
			<view style="padding: 10px;">
				<u-input v-model="formData.unCheckedReason" border="true" type="textarea" :auto-height="true" />
			</view>
		</u-modal>
		<u-keyboard v-if="!disabled" ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange" @backspace="backspace" v-model="keyboardShow"></u-keyboard>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import zTable from "@/components/z-table/z-table.vue";
	export default{
		components:{zTable},
		computed:mapState(['user', ]),
		data(){
			return {
				keyboardShow:false,
				unCheckedModalShow:false,
				content:'请输入原因',
				disabled:false,
				hasChecked:false,
				show:false,
				mode: 'date',
				submitBtn:false,
				modalContentStyle:{
					padding:'10px'
				},
				columns:[{
					title:'姓名',
					key: "zzrxm",
					width: 200
				},{
					title: '身份证号',
					key: "zzrsfzh",
					width: 300,
					formatNum: false
				},{
					title: '联系电话',
					key: "zzrsjh",
					width: 200,
					formatNum: false
				},{
					title: '始租日期',
					key: "szrq",
					width: 200
				}],
				formData:{
					id:'',
					fwwz:'',
					fdxm:'',
					fdsfzh:'',
					fdsjh:'',
					state:'1',
					tjr:'',
					unCheckedReason:'',
					list:[]
				},
				selectList:[],
				rules: {
					fwwz: [
						{ 
							required: true, 
							message: '请输入房屋位置',  
							trigger: ['change','blur'],
						}
					],
					fdxm: [
						{ 
							required: true, 
							message: '请输入姓名',  
							trigger: ['change','blur'],
						}
					],
					fdsfzh: [
						{
							required: true, 
							message: '请输入身份证号', 
							trigger: ['change','blur'],
						},
						{
							min: 18, 
							message: '身份证号不能少于18个字符', 
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		methods:{
			save(sta){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(sta)
							this.formData.state = sta;
						var that = this;
						that.submitBtn = true;
						this.formData.tjr = this.user.user.id || '';
						this.$http.post("/xxcj/zlfw/save",this.formData).then(res =>{
							let data = res.data.data;
							if(data){
								that.$refs.uToast.show({
									title: '操作成功',
									type: 'success',
									callback: ()=>{
										let pages = getCurrentPages(); // 当前页面
										let prePage = pages[pages.length - 2]; // 前一个页面
										uni.navigateBack({
										     success: function() {
												prePage.onLoad(); // 执行前一个页面的onLoad方法
										     }
										});
									}
								});
							}else{
								that.submitBtn = false;
							}
						}).catch(err => {
							that.submitBtn = false;
							that.$refs.uToast.show({
								title: '操作失败请稍后重试...',
								type: 'error',
							})
						})
					}else {
						console.log('表单信息不完整');
					}
				});
				
			},
			checkHasPermission(){
				if(this.formData.id){
					//没有修改权限，或者已审核通过，或者当点内容非本用户，设置内容为禁用状态
					if(this.user.user.auths.indexOf('edit')<0||this.formData.state==='2'|| this.formData.tjr != this.user.user.id){
						this.disabled = true;
					}
					//有审核权限，并且未审核状态，并且非本用户内容
					if(this.user.user.auths.indexOf('check')>-1&&this.formData.state==='1'&&this.formData.tjr != this.user.user.id){
						this.hasChecked = true;
					}
				}
			},
			//审核通过
			checked(){
				this.formData.state = '2';
				this.save();
				console.log("审核通过");
			},
			//审核不通过
			unChecked(){
				this.formData.state = '3';
				this.unCheckedModalShow = true;
				console.log("审核不通过");
			},
			confirm(){
				this.save();
			},
			add(){
				this.$u.route('pages/views/xxcj/zlfw/zlfw_zzr_add');
			},
			del(){
				
			},
			tableSelect(val){
				this.selectList = val;
			},
			valChange(val){
				if(this.formData.fdsfzh.length<18){
					this.formData.fdsfzh += val;
				}
			},
			backspace(){
				if(this.formData.fdsfzh.length) this.formData.fdsfzh = this.formData.fdsfzh.substr(0, this.formData.fdsfzh.length - 1);
			}
		},
		onLoad(options) {
			this.$refs.uForm.setRules(this.rules);
			Object.assign(this.formData,options.item?JSON.parse(options.item):{});
			this.checkHasPermission();
			uni.$on('addZzr',(data) => {
				this.formData.list.push(data)
			})
		},
		
	}
</script>

<style lang="scss" scoped>
	.item-title{
		position: relative;
		font-size: 12px;
		padding-left: 8px;
		line-height: 1;
		margin: 8px auto;

	}
	.item-title::after{
		position: absolute;
		width: 4px;
		top: -1px;
		height: 16px;
		content: "";
		left: 0;
		border-radius: 10px;
		background-color: #2979ff;
	}
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: center;
	}
	.buttons u-button{
		margin: 0 50rpx;
	}
</style>
